<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../font/iconfont.css">
    <link rel="stylesheet" href="../css/reg.css">
    <link rel="stylesheet" href="../css/com.css">
    <script src="../js/jquery-3.6.0.js"></script>
    <script src="../js/interface.js"></script>
    <script src="../js/common.js"></script>
</head>

<body>
    <div class="s-header">
        <div class="header">
            <div class="header-l">
                <div class="header-logo">
                    <img src="../reg/r-12.png" alt="">
                </div>
                <div class="split"></div>
                <div class="header-slogan">
                    <img src="../reg/r-13.png" alt="">
                </div>
            </div>
            <div class="header-r">
                <ul class="nav">
                    <li class="nav-item"><a href="https://i.360.cn/findpwd/customerhelper?">帮助中心</a></li>
                    <li class="nav-item"><a href="https://i.360.cn/complaint?">账号申述</a></li>
                    <li class="nav-item"><a href="https://i.360.cn/security/accountguard">账号卫士</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="s-main">

        <div class="main-bg">
            <div class="swipper"><img src="../reg/r-11.png" alt=""></div>
        </div>
        <div class="main-wrap">
            <div class="main-content">
                <div class="content-wrap">
                    <div class="zc-hd"><a href="javascript:;">手机号注册</a></div>

                    <div class="zc-middle">

                        <div class="phone-wrap ">

                            <div class="phone-img"><span class="iconfont icon-shouji"></span></div>

                            <input class="phone-input" type="text" placeholder="手机号">

                            <div class="phoneTips"></div>
                        </div>

                        <div class="randcode-wrap">
                            <div class="code">
                                <span class="iconfont icon-yanzhengma"></span><input class="codeInp" type="text"
                                    placeholder="验证码">
                            </div>
                            <div class="randcode">4894</div>
                            <div class="randcodeTips"><span>换一张</span></div>
                            <div class="randTips"></div>
                        </div>

                        <div class="pwd-wrap ">

                            <div class="pwd-img"><span class="iconfont icon-icon-mima"></span></div>

                            <input class="pwd-input" type="password" placeholder="密码">

                            <div class="pwdTips"></div>
                        </div>


                        <div class="check-box"><input class="checkbox" type="checkbox"><span>阅读并同意 <a
                                    href="">360用户服务条款</a> 和 <a href="">360用户隐私政策</a></span>
                        </div>
                        <div class="zc">
                            <input type="submit" value="注册" class="zc-button">
                        </div>
                    </div>
                </div>
                <div class="zc-ft"><span>已经有账号？</span><a href="./login.html">直接登录</a></div>
            </div>


        </div>


    </div>
    <div class="s-footer">
        <div class="footer">
            <p class="p1">Copyright©2005-2021 360.CN All Rights Reserved 360安全中心</p>
            <p class="p2"><img src="../reg/r-14.png" alt=""><span>京ICP证080047号[京ICP备08010314号-6]
                    京公网安备11000002000006号</span></p>
        </div>
    </div>
</body>
<script>
    $(function () {
        // var btn = $(".zc-button");
        // console.log(btn);
        var phoneFlag = false;
        var pwdFlag = false;
        var codeFlag = false;
        $(".randcode").text(createCode());//页面加载
        $(".randcodeTips").click(function () {
            $(".randcodeTips").prev().text(createCode());
        })
        $(".phone-input").blur(function () {
            phoneFlag = false;
            var phone = $(".phone-input").val();
            if (phone) {

                var reg = /^1[3-9]\d{9}$/;
                if (reg.test(phone)) {
                    isExistPhone({ phone }).then(({ status, detail }) => {
                        if (status) {
                            $(".phoneTips").text(detail);
                            phoneFlag = true;
                        } else {
                            $(".phoneTips").text(detail);
                        }
                    }).catch(err => {
                        console.log(err);
                    }).finally(function () {

                    })
                } else {
                    $(".phoneTips").text("手机号格式有误");
                }
            } else {
                $(".phoneTips").text("请输入手机号");
            }
            // isDisabled();
        })

        $(".codeInp").blur(function () {
            codeFlag = false;
            var code = $(".codeInp").val();
            if (code) {
                var reg = new RegExp("^" + $(".randcode").text() + "$", "i");
                if (reg.test(code)) {
                    codeFlag = true;
                } else {
                    $(".randTips").text("验证码输入有误");
                }
            }
            // isDisabled();
        })

        $(".pwd-input").blur(function () {
            pwdFlag = false;
            var pwd = $(".pwd-input").val();
            if (pwd) {
                var reg = /^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)(?!([^(0-9a-zA-Z)])+$).{8,}$/;
                if (reg.test(pwd)) {
                    $(".pwdTips").text("√");
                    pwdFlag = true;
                } else {
                    $(".pwdTips").text("密码长度不少于8位，至少包含数字/字母/字符两种组合")
                }
            } else {
                $(".pwdTips").text("请输入密码！");
            }
            // isDisabled();
        })

        // function isDisabled() {
        //     // && codeFlag
        //     if (pwdFlag && phoneFlag && codeFlag && $(".checkbox:checked")) {
        //         $(".zc-button").attr("disabled", false);
        //         $(".zc-button").click(function () {
        //             registerHander;
        //         })
        //     } else {
        //         $(".zc-button").attr("disabled", true);
        //         $(".zc-button").click(function () {
        //             null;
        //         })
        //     }
        // }

        $(".zc").click(function () {
            // console.log($(".checkbox").prop("checked"));
            if (pwdFlag && phoneFlag && codeFlag) {
                if ($(".checkbox").prop("checked")) {
                    registerHander();
                } else {
                    alert("请勾选协议");
                }
            }

        })
        function registerHander() {
            // debugger;
            var phone = $(".phone-input").val();
            var pwd = $(".pwd-input").val();

            register({ pwd, phone }).then(({ status, detail }) => {
                if (status) {
                    location.href = "./login.html";
                } else {
                    alert(detail);
                }
            }).catch(err => {
                console.log(err);
            }).finally(function () {

            })

        }
    })

</script>

</html>